import React, { Component } from 'react'

export default class Pinglun extends Component {
    state={
        pinglun:["你是谁","嗨啊","小三","小王"]
    }
    content = React.createRef()
    ul = React.createRef()
    change = ()=>{
        
        let value = this.content.current.value
        this.setState({
            pinglun:[...this.state.pinglun,value]
        })
        this.content.current.value=""
    }
    componentDidUpdate(){
        this.ul.current.scrollTop=this.ul.current.scrollHeight

    }
  render() {
    return (
      <>
       <input ref={this.content} type="text" name="" id="" />
       <button onClick={this.change} style={{display:"block",margin:"auto"}}>提交</button>
       <ul ref={this.ul} style={{width:300,height:100,border:"1px solid red",margin:"auto",overflow:"auto"}}>
        {
            this.state.pinglun.map((iteam,index)=>{
                return  <li style={{listStyle:"none"}} key={index}>{iteam}</li>

            })
        }
       </ul>
      </>
    )
  }
}
